<template>
    <view class="myIntegral-index-main">
        <view class="myIntegral-index-container">
            <view v-if="Data.dataList.length" class="myIntegral-list">
                <view v-for="item in Data.dataList" :key="item.id" class="integral-item">
                    <view class="integral-content" @click="goToDetail(item)">
                        <view class="integral-detail">
                            <image :src="item.orderGoods[0].goodsImg" class="photo"></image>
                            <view class="intergral-row">
                                <view class="intergral-link">
                                    <text class="intergral-name">{{ item.orderGoods[0].goodsName }}</text>
                                    <image :src="getImgOssUrl('/ui-prod-2.6.0/jiantou@2x.png')" class="link"></image>
                                </view>
                                <text class="intergral-time">{{ item.createdAt }}</text>
                            </view>
                        </view>
                        <view class="integral-num">
                            <view class="intergral-money" v-if="item.orderAmountTotal">
                                {{ item.orderAmountTotal / 100 }}元+
                            </view>
                            <view>{{ item.orderGoods[0].points / 100 }}积分</view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else class="no-data">
                <img class="empty" :src="getImgOssUrl('/ui-prod-2.3.0/empty-addr@2x.png')" />
                暂无数据
            </view>
            <view v-if="Data.dataList.length" class="list-loading">
                {{ listLoading ? '加载中…' : '已经到底啦！' }}
            </view>
            <Loading />
        </view>
    </view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { getImgOssUrl } from '@/commons/utils';
import request from '@/request';
import router from '@/router';
import { onShow, onReachBottom } from '@dcloudio/uni-app';
import Loading from '@/components/el-loading';
let listLoading = ref(false);
const Data = reactive({
    dataList: [],
    page: 1,
    perPage: 20,
    totalCount: 0
});
const getIntegralList = async () => {
    listLoading.value = true;
    const { page, perPage } = Data;
    let res = await request('pointsExchange', {
        page,
        perPage
    });
    let list = res.data.list || [];
    if (page === 1) {
        Data.dataList = list;
    } else {
        Data.dataList = Data.dataList.concat(list);
    }
    listLoading.value = false;
    Data.totalCount = res.data.totalCount;
};
onShow(() => {
    getIntegralList();
});

const goToDetail = item => {
    router.push({
        path: '/pages-user/orderdetail/index',
        query: { orderId: item.id, shopId: item.shopName.id }
    });
};
// 上拉加载
onReachBottom(() => {
    if (Data.totalCount === Data.dataList.length) {
        return;
    }
    Data.page++;
    getIntegralList();
});
</script>
<style lang="scss" scoped>
.myIntegral-index-main {
    padding-bottom: var(--safe-area-inset-bottom);
    .myIntegral-index-container {
        .head {
            display: flex;
            align-items: center;
            height: 87rpx;
            line-height: 87rpx;
            padding: 0 29rpx;
            border-bottom: 2rpx solid #f5f5f5;
            margin-top: 18rpx;
            font-size: 29rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            .line {
                width: 5rpx;
                height: 29rpx;
                background: #fe292b;
                border-radius: 4rpx;
                margin-right: 11rpx;
            }
            .title {
                font-size: 29rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 29rpx;
            }
        }
        .myIntegral-list {
            min-height: 100vh;
            padding: 0 29rpx;
            background-color: #ffffff;
            .integral-item {
                padding: 29rpx 0;
                border-bottom: 2rpx solid #f5f5f5;
                .integral-content {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .integral-detail {
                        display: flex;
                        .intergral-row {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            margin-left: 18rpx;
                            .intergral-link {
                                display: flex;
                                align-items: center;
                                .intergral-name {
                                    display: inline-block;
                                    width: 355rpx;
                                    font-size: 25rpx;
                                    font-family: PingFangSC-Medium, PingFang SC;
                                    font-weight: 500;
                                    color: #33302d;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                                .link {
                                    width: 11rpx;
                                    height: 18rpx;
                                    margin-left: 11rpx;
                                }
                            }

                            .intergral-time {
                                font-size: 22rpx;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #999999;
                            }
                        }
                        .photo {
                            width: 87rpx;
                            height: 87rpx;
                            border-radius: 7rpx;
                        }
                    }
                    .integral-num {
                        font-size: 29rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        line-height: 40rpx;
                        .intergral-money {
                            text-align: right;
                        }
                    }
                }
            }
        }
        .no-data {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            .empty {
                width: 279rpx;
                height: 216rpx;
            }
        }
    }
    .list-loading {
        padding: 30rpx 0;
        text-align: center;
        font-size: 28rpx;
        font-weight: 300;
        color: #999999;
        line-height: 22rpx;
    }
}
</style>
